<template>
  <el-container class="home-container">
  <!-- top -->
      <el-header style="height: 60px;background-color: #000000;">
        <div>
          <span style="color: #ffffff;font-weight: bold;">南欧汽配之家</span>
        </div>
        <el-row>
          <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
          <el-button type="danger" round style="text-align: center;">退出登录</el-button>
        </el-row>
      </el-header>

  <!-- 导航栏 -->
      <div>
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#303133"
            text-color="#fff"
            active-text-color="#FFE100"
            style="padding-left: 500px;background-color: #303133;"
            >
             <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
             <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
             <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
             <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
             <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
             </el-menu>
      </div>
      <!-- 定义头标签 -->

  <!-- 购物车+搜索 -->
  	<div class="search_bar clearfix" style="margin-top: 20px;">
  		<a href="index.html" class="logo fl">
        <!-- <img src="images/logo.png"> -->
      </a>
  		<div class="search_con fl">
  			<input type="text" class="input_text fl" name="" placeholder="搜索商品" v-model="queryItemInfo.query">
  			<input type="button" class="input_btn fr" name="" @click="getGoodsListAll" value="搜索">
  		</div>
  		<div class="guest_cart fr">
  			<a href="#" class="cart_name fl"><i class="el-icon-shopping-cart-full"  style="margin-left: -80px;margin-right: 10px;"></i>我的购物车</a>
  			<div class="goods_count fl" id="show_count">1</div>
  		</div>
  	</div>

    <!-- ************************************************************-->

    <div class="navbar_con">
    	<div class="navbar clearfix">

    		<div class="subnav_con fl" >
    			<h1>全部商品分类</h1>
    			<span></span>

    			<ul class="subnav">

              <li v-for="menu in menuList" >
                <a class="fruit" v-text="menu.name" @click="getGoodsListAll(menu.name,menu.id)"></a>
               </li>

    			</ul>

    		</div>

    		<ul class="navlist fl">
    			<li><a href="" @click="tiaozhuan6">购物首页</a></li>
    		</ul>
    	</div>
    </div>

    <div class="breadcrumb" >
    	<a href="#" @click="getGoodsListAll(null,null)" style="color: #EE9900;">全部分类</a>
    	<span>></span>
    	<a href="#" v-text="caidan" style="color: #EE9900;"></a>
    </div>

    <div class="main_wrap clearfix">
    	<div class="l_wrap fl clearfix">
    		<div class="new_goods">
    			<!-- <h3>新品推荐</h3>
    			<ul>
    				<li>
    					<a href="#"><img src="images/goods/goods001.jpg"></a>
    					<h4><a href="#">进口柠檬</a></h4>
    					<div class="prize">￥3.90</div>
    				</li>
    			</ul> -->
    		</div>
    	</div>

    	<div class="r_wrap fr clearfix">
    		<div class="sort_bar" style="background-color:  #EDEDED">
    			<a href="#" class="active" style="background-color:  #EE9900;">默认</a>
    			<a href="#">价格</a>

    		</div>

    		<ul class="goods_type_list clearfix">
    			<li v-for="(v,k) in goodsList" :key="v.id">

                  <h4><a @click="goodDetails(v.id)" v-text="v.title"></a></h4>
                  <a @click="goodDetails(v.id)"><img :src="imgUrl+v.images" /></a>
                  <div class="prize" v-text="'￥'+v.price/100"></div>

          <!--
    				<a href="#"><img src="images/goods/goods004.jpg"></a>
    				<h4><a href="#">吐鲁番梨光杏</a></h4>
    				<div class="operate">
    					<span class="prize">￥5.50</span>
    					<span class="unit">5.50/500g</span>
    					<a href="#" class="add_goods" title="加入购物车"></a>
    				</div> -->
    			</li>

    		</ul>
        <!-- el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryItemInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryItemInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> -->

        <el-pagination
          background
          layout="prev, pager, next"
          :total="jieshou/queryItemInfo.pageSize *10"
          @current-change="test">
        </el-pagination>

    	</div>
    </div>

    <!-- ************************************************************-->

    <TheHeader></TheHeader>

    </el-container>
</template>

<script>
import TheHeader from '../the/TheFooter.vue'
import TheFooter from '../the/TheHeader.vue'

export default {
  // 初始化函数
  created () {
    // 动态获取左侧菜单信息
    this.getMenuList()

    this.getGoodsListAll(null, null)
    // 设定模式选中按钮
    // this.defaultActive = window.sessionStorage.getItem("activeMenu")
  },

  components: {
    TheHeader,
    TheFooter
  },
  data () {
    return {
      // activeIndex: '1',
      activeIndex2: '2',

      // 左侧菜单数据
      menuList: [],
      goodsList: [],

      jieshou: '',
      caidan: null,
      imgUrl: '../images',
      queryItemInfo: {
        id: '',
        query: '', // 定义查询参数,与输入的内容进行双向绑定
        pageNum: 1,
        pageSize: 20
      },
      menuIcon: {
        1: 'iconfont iconuser',
        9: 'iconfont iconshangpin',
        27: 'iconfont iconicon--copy',
        35: 'iconfont iconquanxian',
        10: 'iconfont iconziyuan',
        11: 'iconfont iconquanxian'
      },
      item: [
        {
          name: '1',
          url: require('../../assets/img/9.jpg')
        },
        {
          name: '2',
          url: require('../../assets/images/2.jpg')
        },
        {
          name: '3',
          url: require('../../assets/image_index/banner_1.jpg')
        },
        {
          name: '4',
          url: require('../../assets/image_index/banner_2.jpg')
        }
      ],
      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: ''
    }
  },
  methods: {
    // 点击获取菜单
    // 跳转到商品详情页
    async goodDetails (goodId) {
      // window.eventBus.$emit('good',v)
      console.log(goodId)
      // window.eventBus.$emit("goodId",goodId)
      window.sessionStorage.setItem('goodId', goodId)
      this.$router.push('/goodsDetails')
    },
    huoqucaidan (name, id) {
      console.log(name)
      console.log(id)
      console.log(this.queryItemInfo.pageNum)

      this.caidan = name
      this.queryItemInfo.id = id
    },
    test (val) {
      console.log(val)
      this.queryItemInfo.pageNum = val
      this.getGoodsListAll(null, null)
    },
    test1 () {
      this.getGoodsListAll(null, null)
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/me')
    },
    tiaozhuan6 () {
      this.$router.push('/shopping')
    },

    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: result } = await this.$http.get('/shop/getShopList')
      if (result.status !== 200) return this.$message.error('菜单查询失败')
      this.menuList = result.data
      console.log(result.data)
    },

    async getGoodsListAll (name, id) {
      this.caidan = name
      this.queryItemInfo.id = id
      console.log(this.queryItemInfo)
      const { data: result } = await this.$http.get('/goods/getGoodAll', {
        params: this.queryItemInfo // 将分页对象传给后台
      })
      if (result.status !== 200) return this.$message.error('图片加载失败')
      this.jieshou = result.data.total
      this.goodsList = result.data.rows
      console.log('****************************************')
      console.log(result.data.rows)
      console.log(result.data)
      console.log('****************************************')
    },

    // 设定左侧折叠展开效果
    collspseClick () {
      this.isCollapse = !this.isCollapse
    },
    defaultActiveMenu (activeMenu) {
      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../assets/css/main.css";
  @import "../../assets/css/reset.css";
   .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }

  .el-header {
    background-color: rgb(43,42,50);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }

  .el-aside {
    // background-color: rgb(43,42,50);

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }

  .home-container {
    // height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  //定义折叠项
  .leftCollapse {
    //设定背景色
    // background-color: black;
    //定义字体大小
    // font-size: 10px;
    //定义行高
    // line-height: 30px;
    //定义颜色
    // color: #FFFFFF;
    //设置居中
    // text-align: center;
    //设定字符间距
    // letter-spacing: 4px;
    //鼠标放上之后设置为小手
    // cursor: pointer;
  }

  .touxiang_box {
            height: 15px;
            width: 15px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 5px #ddd;
            position: absolute;
            left: 87%;
            background-color:#ddd ;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
                padding: auto;
            }
  }
</style>
